<template>
  <TriggerData title="结构物健康评估" :options="options">
    <template #header>
      <Row class="flex justify-between p-4">
        <Col span="16">
          <div class="left_info">
            <div class="item">
              <span>测点名称:</span>
              <span> {{ state.pointName }}</span>
            </div>
            <div class="item">
              <span>测点类型:</span>
              <span> {{ pointTypeEnum[state.pointType]?.text }}</span>
            </div>
            <div class="item">
              <span>设备名称:</span>
              <span> {{ state.stationId }}</span>
            </div>
            <div class="item">
              <span>设备类型:</span>
              <span> {{ deviceTypeEnum[state.deviceType]?.text }}</span>
            </div>
          </div>
        </Col>
        <Col span="8">
          <Compact class="flex w-full justify-end">
            <RangePicker
              v-model:value="date"
              show-time
              :format="timeFormat"
              :value-format="timeFormat"
              :disabled-date="disabledDate"
            ></RangePicker>
          </Compact>
        </Col>
      </Row>
    </template>
    <template #customRender>
      <Chart :state="state" ref="trendChartRef"></Chart>
    </template>
  </TriggerData>
</template>

<script setup lang="tsx">
import { nextTick, onMounted, ref, watch } from 'vue';
import { useDicts } from '@boeyo/portal';
import { Col, Compact, RangePicker, Row } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';
import TriggerData from '@/components/triggerData/index.vue';
import Chart from './Chart.vue';

const dictArr = ['device_type', 'point_type'];

const { deviceTypeEnum, pointTypeEnum } = useDicts(dictArr);

defineProps({
  state: {
    type: Object,
    default: () => {},
  },
});

const disabledDate = (date) => {
  return dayjs().isBefore(date);
};
const disabledTime = (date) => {
  return dayjs().isBefore(date);
};

const trendChartRef = ref();
// const timeDiff = ref(10);
const timeFormat = 'YYYY-MM-DD HH:mm:ss';
// const startTime = ref(dayjs().add(-10, 'm').format(timeFormat));
// const endTime = ref(dayjs().format(timeFormat));

const date = ref<[string, string]>([
  dayjs().add(-10, 'm').format(timeFormat),
  dayjs().format(timeFormat),
]);

// const timeOptions = [
//   {
//     label: '1分钟',
//     value: 1,
//   },
//   {
//     label: '10分钟',
//     value: 10,
//   },
//   {
//     label: '30分钟',
//     value: 30,
//   },
//   {
//     label: '60分钟',
//     value: 60,
//   },
// ];
// const startTime = computed(() => {
//   if (endTime.value) {
//     return dayjs(endTime.value)
//       .subtract(timeDiff.value, 'm')
//       .format(timeFormat);
//   }
//   return '';
// });
watch(
  [date],
  () => {
    const [startTime, endTime] = date.value;
    trendChartRef.value.init([startTime, endTime]);
  },
  {
    deep: true,
  },
);

const options = {
  leftTool: [],
};

onMounted(() => {
  nextTick(() => {
    const [startTime, endTime] = date.value;
    trendChartRef.value.init([startTime, endTime]);
  });
});
</script>

<style lang="scss" scoped>
.left_info {
  display: flex;
  .item {
    margin-right: 30px;
    position: relative;
    white-space: noWrap;
    span {
      &:last-child {
        padding: 0 30px;
        border-right: 1px solid #ccc;
      }
    }
    &:last-child {
      span {
        &:last-child {
          border: none;
        }
      }
    }
  }
}
</style>
